<template>
    <iframe :src="src" ref="myIframe" frameborder="no" width="100%"  scrolling="no" allowtransparency="true"/>
</template>
<script lang="ts">
    import {Component, Prop, Ref, Vue} from "vue-property-decorator";

    @Component
    export default class IframeComponent extends Vue {
        @Prop({default: ""}) private url!: string;

        get src() {
            return process.env.VUE_APP_BASE_API + this.url;
        }

        private timer: any;
        @Ref("myIframe") private myIframe: any;

        changeFrameHeight() {
            if (this.myIframe) {
                if (this.myIframe.contentDocument && this.myIframe.contentDocument.body) {
                    this.myIframe.height = this.myIframe.contentDocument.body.clientHeight;
                    //console.log(this.myIframe.contentDocument.body.clientWidth)
                }
            }
        }

           mounted() {
               const that = this;
               that.timer = window.setInterval(function () {
                   that.changeFrameHeight();
               }, 200);
           }

           beforeDestroy() {
               clearInterval(this.timer);
           }
    }
</script>

<style scoped lang="scss">

</style>

